<template>
    <table>
        <thead>
            <tr>
                <th>设备数排行</th>
                <th style="text-align: right;">正常/总数</th>
                <th></th>
                <th>设备数排行</th>
                <th style="text-align: right;">正常/总数</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,key) in list" :key="key">
                <td><span class="sort" :class="{yellow:key<3}">{{item[0].sort}}</span>{{ item[0].name }}</td>
                <td class="count"><span class="highLight">{{ item[0].normal }}</span>/{{ item[0].total }}</td>
                <td class="blank"></td>
                <td><span class="sort">{{item[1].sort}}</span>{{ item[1].name }}</td>
                <td class="count"><span class="highLight">{{ item[1].normal }}</span>/{{ item[1].total }}</td>
            </tr>
        </tbody>
    </table>
</template>

<script>
import { defineComponent,ref } from 'vue';
export default defineComponent({
    setup() {
        const list = ref([
            [
            {sort:1,name:'智慧路灯',normal:180,total:200},
            {sort:6,name:'电梯',normal:68,total:70}
            ],
            [
            {sort:2,name:'智慧门禁',normal:180,total:200},
            {sort:7,name:'气象设备',normal:60,total:72}
            ],
            [
            {sort:3,name:'监控',normal:120,total:120},
            {sort:8,name:'垃圾桶',normal:62,total:68}
            ],
            [
            {sort:4,name:'广播',normal:100,total:120},
            {sort:9,name:'LED',normal:17,total:24}
            ],
            [
            {sort:5,name:'WI-FI',normal:98,total:100},
            {sort:10,name:'闸机',normal:18,total:20}
            ]
        ])

        return {
            list
        }
    }
})
</script>

<style lang="scss" scoped>  
    table {
        width:100%;
        height:100%;
    }
    th,td {
        background:rgba($color: #000000, $alpha: 0.3);
        font-size:12px;
        padding:5px;
    }
    .blank {
        width:10px;background:none;
    }
    .sort {
        margin:0 5px;
        color:cornflowerblue;
    }
    .sort.yellow {
        color: chocolate;
    }
    .count {
        font-style: italic;
        text-align: right;
        .highLight {
            color:aquamarine
        }
    }
</style>